<template>
  <dv-border-box-10>
    <div class="biaogeneirong">
      <div class="dingbuxuanzekuang">
        <!-- 区 -->
        <span class="xuanzekuangqianwenzi">{{ $store.state.quname }}:</span>
        <!-- 镇选择器 -->
        <zhenselect v-on:selectzhenfangfa="selectzhenfangfa"></zhenselect>
        <!-- 村选择器 -->
        <span class="xuanzekuangqianwenzi">村:</span>
        <cunselect v-on:selectcunfangfa="selectcunfangfa" ref="cun"></cunselect>
        <!-- 时间选择器 -->
        <span class="xuanzekuangqianwenzi">时间段:</span>
        <shijianslect
          v-on:selectshijianfangfa="selectshijianfangfa"
        ></shijianslect>
      </div>
      <div class="biaoge">
        <cunhuiyibiaoge
          ref="cunhuiyibiaoge"
          v-on:setfenyetotal="setfenyetotal"
          :fenyexinxi="fenyexinxi"
          :biaogeqingqiucanshu="biaogeqingqiucanshu"
        ></cunhuiyibiaoge>
      </div>
      <div class="fenye">
        <fenye
          ref="fenye"
          :fenyexinxi="fenyexinxi"
          v-on:fenyegaibian="fenyegaibian"
        ></fenye>
      </div>
    </div>
  </dv-border-box-10>
</template>
<script>
import zhenselect from "../../components/selectitem/zhenselect";
import cunselect from "../../components/selectitem/cunselect";
import shijianslect from "../../components/selectitem/shijanselect";
import cunhuiyibiaoge from "../../components/yemianbiaoge/cunhuiyibiaoge";
import fenye from "../../components/fenye/fenye";

export default {
  data() {
    return {
      biaogeqingqiucanshu: {
        selectzhen: "",
        selectcun: "",
        selectshijian: "",
      },
      // 分页信息
      fenyexinxi: { total: 0, currentPage: 1, pagesize: 8 },
    };
  },
  methods: {
    // 选择镇触发方法
    selectzhenfangfa(value) {
      this.selectzhen = value + "";
      this.$refs.cun.zhenxiadecun(value);
    },
    // 选择村后触发方法
    selectcunfangfa(value) {
      this.biaogeqingqiucanshu.selectcun = value;
      this.biaogeqingqiucanshu.selectzhen = this.selectzhen;
    },
    // 选择时间后触发方法
    selectshijianfangfa(value) {
      this.biaogeqingqiucanshu.selectshijian = value;
    },
    // 分页改变触发的方法
    fenyegaibian(value) {
      this.shuaxinbiaoge();
    },
    // 刷新表格
    shuaxinbiaoge() {
      this.$refs.cunhuiyibiaoge.gengxin();
    },
    // 设置分页的total
    setfenyetotal(total) {
      this.fenyexinxi.total = total;
    },
  },
  watch: {
    biaogeqingqiucanshu: {
      handler: function () {
        this.shuaxinbiaoge();
      },
      deep: true,
    },
  },
  mounted() {},
  components: {
    // 选择框
    zhenselect,
    cunselect,
    shijianslect,
    // 表格
    cunhuiyibiaoge,
    // 分页
    fenye,
  },
};
</script>
<style lang="less" scoped>
.qunzhongyijian {
  height: 100%;
}
.topbtnstyle {
  left: 100px;
  top: 150px;
}
.li1 {
  width: 171%;
}
.biaogediv {
  padding: 30px 50px;
  height: calc(100% - 20%);
}
.biaogeneirong {
  height: 95%;
  width: 94%;
  padding: 2% 3%;
}
.dingbuxuanzekuang {
  display: flex;
  align-items: center;
}
.xuanzekuangqianwenzi {
  margin: 0 10px;
}

.biaoge {
  margin: 20px 0;
  height: 80%;
}
</style>